<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!Doctype html>
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title>党建</title>
    <meta name="keywords" content="务川,党建"/>
    <meta name="description" content="务川,党建"/>
    <link href="../../static/images/ico/favicon.png" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="../../static/css/article.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap.css">

    <script type="text/javascript" src="../../static/js/user/jq181.js"></script>
    <script type="text/javascript" src="../../static/js/user/article.js"></script>
    <script type="text/javascript" src="../../static/js/bootstrap.js"></script>
    <script>
        $(function(){
            studyTime();
//            $("#myTips").css({top});
        });
        //显示学习计时器
        var saveStep = 1;//每几分钟保存一次学习时间
        var saveUrl = "/learning/saveLearningTime.do";
        var oldMinute = ${content.realtime};
        if(!isNaN(oldMinute))
        {
            oldMinute=new Number(oldMinute);
        }
        else
        {
            oldMinute = 0;
        }
        var minute = 0, second = 0;
        var t = 0;
        var flag1;
        var lastMinute = 0;
        function studyTime()
        {
            lastMinute = minute;
            minute=parseInt(t/60);
            second=parseInt(t%60);

            $("#minute").html(minute+oldMinute);
            $("#realtime").val(minute+oldMinute);
            $("#second").html(second);
            if(minute > 0 &&lastMinute<minute && (minute%saveStep==0))//自动保存
            {
                save();
            }
            t = t + 1;
            flag1 = setTimeout("studyTime()", 1000);
        }
        //保存已经学习的时间
        function save(){
            var uid = $("input[name='uid']").val();
            //var realtime = $("input[name='realtime']").val();
            var contentId = $("input[name='contentId']").val();
            $.ajax({
                type: "POST",
                url: saveUrl,
                data: {uid:uid,realtime:(minute+oldMinute),contentId:contentId},
                success: function(data){

                }
            });
        }
    </script>
</head>
<body>
<jsp:include page="../../themes/header.jsp"/>
<div id="middle">
    <div class="wrapper">
        <div id="middle-content">
            <div class="article-wrapper">
                <div class="article-header">
                    <div>
                        <span></span>当前位置：<a href="/">首页</a> &gt; <a href="/learning/curriculumList.do">学习考试</a> &gt; <a href="/learning/curriculumList.do">学习</a>
                    </div>
                </div>
                <div class="article-content-wrapper" style="padding-top: 10px;">
                    <h2>${content.title}</h2>

                    <p class="article-info">
                        <span>
                            需学习 <span class="label label-default">${content.time}分钟</span>
                        </span>
                        <span>
                            已学习 <span class="label label-default" style="font-size: 15px;"><span id="minute">${content.realtime}</span>分<span id="second">10</span>秒</span>
                            <input type="hidden" id="realtime" name="realtime" value="${content.realtime}" />
                            <input type="hidden" name="uid" value="${uid}" />
                            <input type="hidden" name="contentId" value="${content.id}" />
                        </span>
                        <button class="btn btn-success" onclick="save()">保存</button>
                        <div class="popover right" style="display: block;top: 260px;left: 200px;">
                            <div class="arrow"></div>
                            <div class="popover-content">
                                学习时间每分钟会自动保存
                            </div>
                        </div>
                    </p>

                    <div class="article-content">
                        ${content.contentStr}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../../themes/footer.jsp"/>

</body>
</html>